<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('网店资料绑定')" />
	<th:block th:include="include :: businessCSS" />
	<style>

		.preservationBtn{padding: 10px;text-align: center;position: fixed;bottom: 0;width: 95%;background-color: #fff;z-index: 999;text-align: right;}
		.layui-form-item{margin: 0;}
		.preservationBtn input:nth-child(1){font-size: 14px;background-color: rgb(80, 138, 238);color: #fff;border: none;padding: 5px 20px;border-radius: 5px;cursor: pointer;}
		.preservationBtn input:nth-child(2){font-size: 14px;background-color: #fff;color: #999;border: none;padding: 5px 20px;border-radius: 5px;cursor: pointer;border: 1px solid #ddd;}
		.north{margin: 0;}
		.layui-form-label{width: 120px;}
		.layui-input-block{margin-left: 130px;}
		.layui-card-header.layuiadmin-card-header-auto{box-shadow: none;}
		body{background: #fff;}
		.layui-inline{padding: 8px;}
		.layui-inline input{height: 35px;}
		.preservationBtn{padding: 10px;text-align: center;}
		.preservationBtn input{font-size: 16px;background-color: rgb(80, 138, 238);color: #fff;border: none;padding: 5px 30px;border-radius: 10px;cursor: pointer;width: 80px;height: 35px;}
		.layui-card-header .layui-icon{right: 0;top: 0;margin: 0;}

	</style>

</head>

<body class="no-skin">
<div class="main-container" id="main-container">
	<div class="main-content">
	<form class="layui-form head-form">
	    <div class="north" style="background-color: #fff;">
			<div class="forminput"></div>
			<div class="preservationBtn">
				<input type="button" lay-submit lay-filter="btn-edit" id="btn-edit" value="保存">
			</div>
			<div style="height: 50px;"></div>
    	</div>
    </form>
	</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: businessJS" />
<!-- <th:block th:include="include :: inlineJS" /> -->

<script th:inline="javascript">
	/*<![CDATA[*/
	var prefix = ctx + "hr/amazonshop",
    	prefix2 = ctx + "base/company";
	var	k_fields=[]
	var fields = [[${fields}]];
	var fieldsList = [[${fieldsList}]];
	var fieldsHiddenList = [[${fieldsHiddenList}]];
	var gridColumns= [[${gridColumns}]];
	var amazonShop= [[${amazonShop}]];
	var moduleTable=parent.moduleTable;
	if(!amazonShop){
		amazonShop={}
	}
	var all_fields= fieldsList;
	// console.log(amazonShop,'按钮状态',moduleTable);
	var $,layer,form,table;
    layui.use(['laydate','form','layer','jquery','util','element','upload'], function () {
        $ = layui.$,layer = layui.layer,form = layui.form,laydate = layui.laydate,util = layui.util,element=layui.element,upload = layui.upload;
		let URL = window.location.href
        function getUrlParams(url) {
            let urlStr = url.split('?')[1]
            const urlSearchParams = new URLSearchParams(urlStr)
            const result = Object.fromEntries(urlSearchParams.entries())
            return result
        }
		var urldata=getUrlParams(URL)
		if(urldata.guid!=0){
			apostfirst()
		}else{
			addfirst()
			areas()
		}

		function apostfirst(){
            //初始化
	        var str=`<div class="layui-form layui-card-header layuiadmin-card-header-auto">
		    <div class="layui-form-item margin_t0">`
	        $.each(fieldsList,function(i,v){
				if(!v.fieldFrontRequired ){
		    		str+=`<div class="layui-inline margin_r0 ${v.fieldFrontTopSize == 1 ?'layui-col-xs4':(v.fieldFrontTopSize == 2 ?'layui-col-xs8':'layui-col-xs12')}">
	        		    <label class="layui-form-label">`
		    			
							str+=`<font>${v.fieldName}：</font>
	        		    </label>
	        		    <div class="layui-input-block">`
	        			if(v.fieldFrontType=='t_text')str+=`<input ids="1" type="text"  name="${v.fields}" id="${v.fields}" value="${v.fieldContent}" class="${v.fieldFrontEdit ?'layui-input':'layui-input canntEdit'}" lay-verify="${v.fieldFrontRequired ?'required':''}" autocomplete="off" onblur="${v.fieldFrontRequired ?'inputOnBlur(this)':''}" ${v.fieldFrontEdit?'':'readonly'}>`
	        			if(v.fieldFrontType=='t_decimal')str+=`<input type="${v.fieldFrontEdit?'number':'text'}" value="${v.fieldContent}" name="${v.fields}" id="${v.fields}"  class="${v.fieldFrontEdit?'layui-input':'layui-input canntEdit'}" autocomplete="off"  onblur="${v.fieldFrontRequired?'inputOnBlur(this)':''}" ${v.fieldFrontEdit?'':'readonly'}>`
	        			if(v.fieldFrontType=='t_date' || v.fieldFrontType=='t_datetime' || v.fieldFrontType=='t_year' || v.fieldFrontType=='t_monthly'){
	        				str+=`<input type="text" name="${v.fields}" id="${v.fields}" value="${v.fieldContent}"  datetype="${v.fieldFrontType}" class="${v.fieldFrontEdit ?'layui-input t_date' :'layui-input canntEdit'}" autocomplete="off"  onblur="${v.fieldFrontRequired?'inputOnBlur(this)':''}" ${v.fieldFrontEdit?'':'readonly'}>`
	        				str+=`<i id="${v.fields}_date" class="dhicon dh-calendar icon_date_business" style="font-size:0"></i>`
	        			}
		    			if(v.fieldFrontType=='t_buttontext'){
                            str+=`<input type="text" class="${v.fieldFrontEdit ?'layui-input buttontext':'layui-input canntEdit'}" name="${v.fields}" id="${v.fields}" value="${v.fieldContent}" autocomplete="off" readonly onblur="${v.fieldFrontRequired?'inputOnBlur(this)':''}"/>`
		    				if(v.fieldFrontEdit){
		    					str+=`<i class="layui-icon layui-icon-more getMore" onclick="getMore('${v.fields}',null,'${v.fieldName}','${v.fieldSearchType}',false,false)" getType="${v.fields}"></i>`
		    				}
                        }
		    			if(v.fieldFrontType=='t_dropdown'){
		    				if(v.fieldFrontEdit){
		    					str+=`<select type="text" id="${v.fields}" name="${v.fields}" autocomplete="off" class="layui-select" lay-search lay-filter="select_top" data-fieldMatched="${v.fieldMatched}" data-fieldFrontSave="${v.fieldFrontSave}" data-fieldFrontShow="${v.fieldFrontShow}">
		    			     		<option></option>`
		    						if(v.dropdownList){
		    							for(var i=0;i<v.dropdownList.length;i++){
                                             str+=`<option text="${v.dropdownList[i].vname}" value="${v.dropdownList[i].vid}" ${v.dropdownList[i].vname==v.fieldContent ?'selected' :''} data-vremark="${v.dropdownList[i].vremark}" data-fvalue="${v.dropdownList[i].fvalue}">${v.dropdownList[i].vname}</option>`
		    						    }
		    						}
		    					str+=`</select>`
		    				}else{
		    					str+=`<input  type="text" name="${v.fields}" id="${v.fields}" value="${v.fieldContent}"  class="layui-input canntEdit" autocomplete="off" readonly>`
		    				}
                        }
		    			if(v.fieldFrontType=='t_textarea')str+=`<textarea name="${v.fields}" id="${v.fields}" class="${v.fieldFrontEdit}?'layui-textarea':'layui-textarea canntEdit'" onblur="${v.fieldFrontRequired ?'inputOnBlur(this)':''}"  ${v.fieldFrontEdit?'':'readonly'}>${v.fieldContent}</textarea>`
		    			
	        			if(v.fieldFrontType=='t_file2'){
	        				str+=`<div class="layui-upload-drag fieldsimg" name="${v.fields}" id="${v.fields}_upimg">
	        					<input type="hidden" id="${v.fields}" name="${v.fields}"/>
	        					<div class="${v.fieldContent ?'layui-hide upicon':'upicon'}">
	        						<i class="layui-icon"></i>
	        						<p>点击上传图片</p>
	        					</div>
	        					
	        					<div class="${v.fieldContent ?'' :'layui-hide'}" id="uploadDemoView">
	        					  <img src="${v.fieldContent}" alt="上传成功后渲染" style="max-width: 196px">
	        					</div>
	        				</div>`
	        			}
						str+=`</div></div>`
					}else{
						str+=`<input type="hidden" name="${v.fields}" id="${v.fields}" value="${v.fieldContent}">`
					}

	        })
	        str+=`</div></div>`
    
		    $.each(fieldsHiddenList,function(i,v){
                 str+=`<input type="hidden" name="${v.fields}" id="${v.fields}" value="${v.fieldContent}">`
		    })
	        $('.forminput').html(str)    
		}
		
		function addfirst(){
            //初始化
	        var str=`<div class="layui-form layui-card-header layuiadmin-card-header-auto">
		    <div class="layui-form-item margin_t0">`
	        $.each(fieldsList,function(i,v){
		    		str+=`<div class="layui-inline margin_r0 ${v.fieldFrontTopSize == 1 ?'layui-col-xs4':(v.fieldFrontTopSize == 2 ?'layui-col-xs8':'layui-col-xs12')}">
	        		    <label class="layui-form-label">`
		    			if(v.fieldFrontRequired){str+=`<font class="f_red">*</font>`}	
	        			str+=`<font>${v.fieldName}：</font>
	        		    </label>
	        		    <div class="layui-input-block">`
	        			if(v.fieldFrontType=='t_text')str+=`<input  type="text"  name="${v.fields}" id="${v.fields}" value="${v.fieldContent}" class="${v.fieldFrontEdit ?'layui-input':'layui-input canntEdit'}" lay-verify="${v.fieldFrontRequired ?'required':''}" autocomplete="off" onblur="${v.fieldFrontRequired ?'inputOnBlur(this)':''}" ${v.fieldFrontEdit?'':'readonly'}>`
	        			if(v.fieldFrontType=='t_decimal')str+=`<input type="${v.fieldFrontEdit?'number':'text'}" value="${v.fieldContent}" name="${v.fields}" id="${v.fields}"  class="${v.fieldFrontEdit?'layui-input':'layui-input canntEdit'}" autocomplete="off"  onblur="${v.fieldFrontRequired?'inputOnBlur(this)':''}" ${v.fieldFrontEdit?'':'readonly'}>`
	        			if(v.fieldFrontType=='t_date' || v.fieldFrontType=='t_datetime' || v.fieldFrontType=='t_year' || v.fieldFrontType=='t_monthly'){
	        				str+=`<input type="text" name="${v.fields}" id="${v.fields}" value="${v.fieldContent}"  datetype="${v.fieldFrontType}" class="${v.fieldFrontEdit ?'layui-input t_date' :'layui-input canntEdit'}" autocomplete="off"  onblur="${v.fieldFrontRequired?'inputOnBlur(this)':''}" ${v.fieldFrontEdit?'':'readonly'}>`
	        				str+=`<i id="${v.fields}_date" class="dhicon dh-calendar icon_date_business" style="font-size:0"></i>`
	        			}
		    			if(v.fieldFrontType=='t_buttontext'){
                            str+=`<input type="text" class="${v.fieldFrontEdit ?'layui-input buttontext':'layui-input canntEdit'}" name="${v.fields}" id="${v.fields}" value="${v.fieldContent}" autocomplete="off" readonly onblur="${v.fieldFrontRequired?'inputOnBlur(this)':''}"/>`
		    				if(v.fieldFrontEdit){
		    					str+=`<i class="layui-icon layui-icon-more getMore" onclick="getMore('${v.fields}',null,'${v.fieldName}','${v.fieldSearchType}',false,false)" getType="${v.fields}"></i>`
		    				}
                        }
		    			if(v.fieldFrontType=='t_dropdown'){
		    				if(v.fieldFrontEdit){
		    					str+=`<select type="text" id="${v.fields}" name="${v.fields}" autocomplete="off" class="layui-select" lay-search lay-filter="select_top" data-fieldMatched="${v.fieldMatched}" data-fieldFrontSave="${v.fieldFrontSave}" data-fieldFrontShow="${v.fieldFrontShow}">
		    			     		<option></option>`
		    						if(v.dropdownList){
		    							for(var i=0;i<v.dropdownList.length;i++){
                                             str+=`<option text="${v.dropdownList[i].vname}" value="${v.dropdownList[i].vid}" ${v.dropdownList[i].vname==v.fieldContent ?'selected' :''} data-vremark="${v.dropdownList[i].vremark}" data-fvalue="${v.dropdownList[i].fvalue}">${v.dropdownList[i].vname}</option>`
		    						    }
		    						}
		    					str+=`</select>`
		    				}else{
		    					str+=`<input  type="text" name="${v.fields}" id="${v.fields}" value="${v.fieldContent}"  class="layui-input canntEdit" autocomplete="off" readonly>`
		    				}
                        }
		    			if(v.fieldFrontType=='t_textarea')str+=`<textarea name="${v.fields}" id="${v.fields}" class="${v.fieldFrontEdit}?'layui-textarea':'layui-textarea canntEdit'" onblur="${v.fieldFrontRequired ?'inputOnBlur(this)':''}"  ${v.fieldFrontEdit?'':'readonly'}>${v.fieldContent}</textarea>`
		    			
	        			if(v.fieldFrontType=='t_file2'){
	        				str+=`<div class="layui-upload-drag fieldsimg" name="${v.fields}" id="${v.fields}_upimg">
	        					<input type="hidden" id="${v.fields}" name="${v.fields}"/>
	        					<div class="${v.fieldContent ?'layui-hide upicon':'upicon'}">
	        						<i class="layui-icon"></i>
	        						<p>点击上传图片</p>
	        					</div>
	        					
	        					<div class="${v.fieldContent ?'' :'layui-hide'}" id="uploadDemoView">
	        					  <img src="${v.fieldContent}" alt="上传成功后渲染" style="max-width: 196px">
	        					</div>
	        				</div>`
	        			}
    
	        	        str+=`</div></div>`
	        	
	        })
	        str+=`</div></div>`
    
		    $.each(fieldsHiddenList,function(i,v){
                 str+=`<input type="hidden" name="${v.fields}" id="${v.fields}" value="${v.fieldContent}">`
		    })
	        $('.forminput').html(str)    
		}
		
		
		
		function areas(){
			$.get("/hr/amazonshop/getAmazonRegion",function(res){
				var str=`<div class="layui-inline margin_r0 layui-col-xs12"><label class="layui-form-label"><font class="f_red">*</font>店铺区域</label><div class="layui-input-block"><select name="areas" lay-filter="aihao"><option value=""></option>`
                for(var i=0;i<res.data.length;i++){
					str+=`<option tit="${res.data[i].regionName}" value="${res.data[i].guid}" ${res.data[i].guid==amazonShop.regionGuid ?'selected':''}>${res.data[i].regionName}</option>`
				}
				str+=`</select></div></div><div class="layui-inline margin_r0 country layui-col-xs12"></div>`
				$('.layui-form-item').append(str)
				form.render();
				aihao(amazonShop.regionGuid)
			})
		}
		function aihao(data){
			$.get("/hr/amazonshop/getAmazonRegionItem?pGuid="+data,function(res){
				var areastr=`<label class="layui-form-label"><font class="f_red">*</font>店铺国家</label><div class="layui-input-block">`
				var areaArr=[]
				if(amazonShop.marketplaceIds){
					areaArr=amazonShop.marketplaceIds.split(',') 
				}
				for(var i=0;i<res.data.length;i++){
					areastr+=`<input type="checkbox" tit="${res.data[i].countryName}" code="${res.data[i].countryCode}" value="${res.data[i].marketplaceId}" ` 
					for(var n=0;n<areaArr.length;n++){
						if(areaArr[n]==res.data[i].marketplaceId)areastr+=`checked="ture"`
					}
					areastr+=` name="country" title="${res.data[i].countryName}">`
				}
				areastr+=`</div>`
				$('.country').html(areastr)
				form.render();
			})
		}
		form.on('select(aihao)', function (data) {
			$('#regionName').val(data.elem[data.elem.selectedIndex].text)
			aihao(data.value)
        })
		
		// 保存操作
        form.on('submit(btn-edit)', function(data){
            var is_return = false//是否中断保存
            fieldsList.map((v,i)=>{
                if(v.fieldFrontRequired){
                    if(!$('#'+v.fields).val()){
                         layer.msg(v.fieldName+'不能为空')
                         is_return=true
                    }
                }
            })
            if(is_return) return;
            

			if(urldata.guid==0){
				var marketplaceIds=[]
                var countryName=[]
                var countryCode=[]
			    $("input[name='country']:checked").each(function(x,y){
			    	marketplaceIds.push($(this).val())
			    	countryName.push($(this).attr('tit'))
			    	countryCode.push($(this).attr('code'))
			    })
			    marketplaceIds=marketplaceIds.join(',')
			    countryName=countryName.join(',')
			    countryCode=countryCode.join(',')
				data.field.regionGuid=data.field.areas
			    data.field.marketplaceIds=marketplaceIds
			    data.field.countryName=countryName
			    data.field.countryCode=countryCode
			    if(!regionGuid)return layer.msg('店铺区域不能为空');
			    if(!marketplaceIds)return layer.msg('店铺国家不能为空');
			}

			
			$.modal.loading("正在处理中，请稍后...");
		    $.post("/hr/amazonshop/editpost",{infoItems:JSON.stringify(data.field)},function(res){
                $.modal.closeLoading()
			 	layer.msg(res.msg);
                if(res.code == 0){
					parent.location.reload();
                }
	        });
        });

         // 初始化渲染上传图片
         assemblyhead()
		// beforeInit();//表单初始化之前的动作集合
		// layui.element.render();

    });
	
	function delbtn(){
		var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name
        parent.layer.close(index);//关闭窗口

	}
	/*]]>*/
</script>

</body>
</html>